'use client';

import React from 'react';
import { Flex, Space } from 'antd';
import a from './a.svg';
import b from './b.png';
import { px2vw, px2vh, responsive } from '@/app/cg06/utils/responsive'; 

interface BoxProps {
	icon: string;
	label: string;
	value: number;
	unit: string;
}

const Box: React.FC<BoxProps> = props => {
	const { icon, label, value, unit } = props;

	return (
		<div
			style={{
				position: 'relative',
				padding: px2vw(10),
				paddingTop: px2vh(38),
				width: px2vw(186),
				height: px2vh(230),
				background:
					'linear-gradient( 180deg, rgba(61,132,216,0.2) 0%, rgba(61,132,216,0.12) 35%, rgba(19,26,45,0) 100%)',
				border: '1px solid rgba(61,132,216,0.4)',
				backdropFilter: 'blur(10px)'
			}}
		>
			<span
				style={{
					position: 'absolute',
					left: px2vw(10),
					top: px2vw(10),
					display: 'flex',
					width: px2vw(14),
					height: '4px'
				}}
			>
				<img src={a.src} alt="a" width="100%" height="100%"></img>
			</span>
			<div style={{ marginBottom: 18 }}>
				<Flex
					align="center"
					justify="center"
					style={{
						width: px2vw(88),
						height: px2vh(88),
						margin: '0 auto',
						position: 'relative'
					}}
				>
					<img
						src={b.src}
						alt="b"
						style={{
							width: '100%',
							height: '100%',
							position: 'absolute',
							top: 0,
							left: 0
						}}
					/>
					<img src={icon} alt="icon" style={{ maxWidth: px2vw(34), height: px2vh(28) }} />
				</Flex>
			</div>
			<div style={{ textAlign: 'center' }}>
				<div
					style={{
						color: 'rgba(193,234,255,0.6)',
						fontSize: px2vw(16),
						fontWeight: 500,
						marginBottom: px2vw(5)
					}}
				>
					{label}
				</div>
				<Space size={5} align="baseline">
					<span style={{ color: '#C1EAFF', fontSize: px2vw(24), fontWeight: 'bold' }}>
						{value.toLocaleString('en')}
					</span>
					<span style={{ color: '#C1EAFF', fontSize: px2vw(14), fontWeight: 600 }}>
						{unit}
					</span>
				</Space>
			</div>
		</div>
	);
};

export default Box;

